<%@ include file="../common/Top.jsp"%>

<!-- breadcrumb-section start -->
<nav class="breadcrumb-section theme1 breadcrumb-bg1">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-title text-center my-20">
                    <h2 class="title text-dark text-capitalize">cart</h2>
                </div>
            </div>
            <div class="col-12">
                <ol class="breadcrumb bg-transparent m-0 p-0 align-items-center justify-content-center">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                        cart page
                    </li>
                </ol>
            </div>
        </div>
    </div>
</nav>
<!-- breadcrumb-section end -->

<!-- product tab start -->
<section class="whish-list-section theme1 pb-70">
    <div class="container grid-wraper">
        <div class="row">
            <div class="col-12">
                <h3 class="title pb-25 text-center text-md-left text-capitalize">Your cart items</h3>
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead class="thead-light">
                        <tr>
                            <th class="text-center" scope="col">Product Image</th>
                            <th class="text-center" scope="col">Product Name</th>
                            <th class="text-center" scope="col">Stock Status</th>
                            <th class="text-center" scope="col">Qty</th>
                            <th class="text-center" scope="col">Price</th>
                            <th class="text-center" scope="col">Total</th>
                            <th class="text-center" scope="col">action</th>
                            <th class="text-center" scope="col">Checkout</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
                        <tr>
                            <th class="text-center" scope="row">
                                <img src="${cartItem.item.attribute2}">
                            </th>
                            <td class="text-center">
                                <span class="whish-title">${cartItem.item.itemId}</span>
                            </td>
                            <td class="text-center">
                                <span class="badge badge-danger position-static my-badge">In Stock</span>
                            </td>
                            <td class="text-center">
                                <div class="product-count style">
                                    <div class="count d-flex justify-content-center">
                                        <input class="quantity" type="number" min="1" max="10" step="1" name="${cartItem.item.itemId}" value="${cartItem.quantity}">
                                        <div class="button-group">
                                            <button class="count-btn increment"><i
                                                    class="fas fa-chevron-up"></i></button>
                                            <button class="count-btn decrement"><i
                                                    class="fas fa-chevron-down"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">
                                <%--特别注意标签之间不要有空格，因为node.text()会获取其中的空格，下同--%>
                                <span class="whish-list-price" id="${cartItem.item.itemId}_listPrice">$ ${cartItem.item.listPrice}</span>
                            </td>
                            <td class="text-center">
                                    <%--特别注意标签之间不要有空格，因为node.text()会获取其中的空格，下同--%>
                                <span class="whish-list-price total" id="${cartItem.item.itemId}_total">$ ${cartItem.total}</span>
                            </td>
                            <td class="text-center">
                                <a href="#"> <span class="trash"><i class="fas fa-trash-alt"></i> </span></a>
                            </td>
                            <td class="text-center">
                                <a href="#" class="btn theme-btn--dark1 btn--xl text-uppercase">buy now</a>
                            </td>
                        </tr>
                        </c:forEach>
<%--                        <tr>--%>
<%--                            <th class="text-center" scope="row">--%>
<%--                                <img src="assets/img/product/4.jpg" alt="img">--%>
<%--                            </th>--%>
<%--                            <td class="text-center">--%>
<%--                                <span class="whish-title">Originals Kaval Windbreaker</span>--%>
<%--                            </td>--%>
<%--                            <td class="text-center">--%>
<%--                                <span class="badge badge-danger position-static my-badge">In Stock</span>--%>
<%--                            </td>--%>
<%--                            <td class="text-center">--%>
<%--                                <div class="product-count style">--%>
<%--                                    <div class="count d-flex justify-content-center">--%>
<%--                                        <input type="number" min="1" max="10" step="1" value="1">--%>
<%--                                        <div class="button-group">--%>
<%--                                            <button class="count-btn increment"><i--%>
<%--                                                    class="fas fa-chevron-up"></i></button>--%>
<%--                                            <button class="count-btn decrement"><i--%>
<%--                                                    class="fas fa-chevron-down"></i></button>--%>
<%--                                        </div>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                            </td>--%>
<%--                            <td class="text-center">--%>
<%--                                        <span class="whish-list-price">--%>
<%--                                        $38.24--%>
<%--                                    </span>--%>
<%--                            </td>--%>

<%--                            <td class="text-center">--%>
<%--                                <a href="#"> <span class="trash"><i class="fas fa-trash-alt"></i> </span></a>--%>
<%--                            </td>--%>
<%--                            <td class="text-center">--%>
<%--                                <a href="#" class="btn theme-btn--dark1 btn--xl text-uppercase">buy now</a>--%>
<%--                            </td>--%>
<%--                        </tr>--%>
<%--                        <tr>--%>
<%--                            <th class="text-center" scope="row">--%>
<%--                                <img src="assets/img/product/6.jpg" alt="img">--%>

<%--                            </th>--%>
<%--                            <td class="text-center">--%>
<%--                                <span class="whish-title">New Balance Arishi</span>--%>
<%--                            </td>--%>
<%--                            <td class="text-center">--%>
<%--                                <span class="badge badge-danger position-static my-badge">In Stock</span>--%>
<%--                            </td>--%>
<%--                            <td class="text-center">--%>
<%--                                <div class="product-count style">--%>
<%--                                    <div class="count d-flex justify-content-center">--%>
<%--                                        <input type="number" min="1" max="10" step="1" value="1">--%>
<%--                                        <div class="button-group">--%>
<%--                                            <button class="count-btn increment"><i--%>
<%--                                                    class="fas fa-chevron-up"></i></button>--%>
<%--                                            <button class="count-btn decrement"><i--%>
<%--                                                    class="fas fa-chevron-down"></i></button>--%>
<%--                                        </div>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                            </td>--%>
<%--                            <td class="text-center">--%>
<%--                                        <span class="whish-list-price">--%>
<%--                                        $38.24--%>
<%--                                    </span></td>--%>

<%--                            <td class="text-center">--%>
<%--                                <a href="#"> <span class="trash"><i class="fas fa-trash-alt"></i> </span></a>--%>
<%--                            </td>--%>
<%--                            <td class="text-center">--%>
<%--                                <a href="#" class="btn theme-btn--dark1 btn--xl text-uppercase">buy now</a>--%>
<%--                            </td>--%>
<%--                        </tr>--%>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- product tab end -->


<%@ include file="../common/Bottom.jsp"%>

<script src="assets/js/vendor/vendor.min.js"></script>
<script src="assets/js/plugins/plugins.min.js"></script>
<script src="assets/js/main.js"></script>

<script>
    $(function () {
        //因为要一次性给所有购物车物品都绑定事件监听，因此采用class来一次性获取所有的物品数量输入框
        $(".quantity").on('blur', function () {
            var r = confirm("Whether to save your changes or not?");
            if (r === true) {
                var _this = this;
                $.ajax({
                    type    : "GET",
                    url     : "updateCartQuantities?" + this.name + "=" + this.value,
                    success : function (data) {

                        // var totalId =
                        // var total = $('#' + _this.name + '_total').text("11000");
                        // console.log(total)

                        //取出商品的单价
                            //这里要用到字符串切割，因此在html的相关代码中，不能随便添加空格和换行，否则会导致空格数增加，字符串切割错误
                        var listPrice = $('#' + _this.name + '_listPrice').text().slice(2);
                        console.log(listPrice)

                        //计算单种物品的总价
                        var totalNum = returnFloat(listPrice * _this.value);

                        //重新操作DOM树赋值
                        $('#' + _this.name + '_total').text('$' + ' ' + totalNum);

                        //计算整个购物车的总价（所有物品的总价）
                        var subtotal = 0;
                        var totalList = $('.total');
                        for (var i = 0; i < totalList.length; i++) {
                            //对字符串进行裁剪，提取出其中的数字部分
                            console.log(totalList.get(i).innerText.slice(2));
                            var cur = totalList.get(i).innerText.slice(2);
                            subtotal += parseFloat(cur);
                        }
                        console.log(subtotal);

                        //现在暂时没用上
                        $('#subTotal').text("Sub Total: $" + returnFloat(subtotal));
                    }
                });
            } else {
                //刷新页面
                window.location.reload();
            }
        });

        //将数字保留两位小数
        function returnFloat(value){
            var value=Math.round(parseFloat(value)*100)/100;
            var xsd=value.toString().split(".");
            if(xsd.length==1){
                value=value.toString()+".00";
                return value;
            }
            if(xsd.length>1){
                if(xsd[1].length<2){
                    value=value.toString()+"0";
                }
                return value;
            }
        }
    });
</script>

</body>

</html>

